<template>
   <view>
      <van-sticky>
         <view class="index_head">
            <view>
               <view class="placeName">
                  <text>{{userInfo.yardName}}</text>  
                  <!-- <van-icon name="arrow-down" size="18"></van-icon> -->
               </view>
               <view class="welcome">欢迎<text>{{userInfo.name}}</text> 登录系统</view> 
            </view>
            <view class="nickname">
               {{userInfo?.positionName}}
            </view>
            <van-icon name="search" size="30"/>
         </view>
      </van-sticky>
      <view class="swiperBox">
         <swiper class="swiper"  :autoplay="true" >
				<swiper-item> 
					<image  mode="aspectFit" src="../../static/images/banner.png"/>
               <!-- <image
                  src="https://ossresource.miyingbl.com/uploads/20240129/99abc36b6ccbf335a82d35e129df6dc9.jpg"
                  mode="scaleToFill"
               /> -->
				</swiper-item> 
			</swiper> 
         <view class="grid_box" v-for="(item,index) in tabList" :key="index">
              <view class="title">{{item.name}}</view>
              <view style="margin-top: 30rpx;">
               <van-grid column-num="4" :border="false">
                  <van-grid-item icon="photo-o" use-slot :text="item.name" v-for="(item1,index1) in item.children" :key="item1"  @click="routeTo(item1)">
                     <image
                           style="width:126rpx; height: 126rpx;"
                           :src="item1.icon"
                        />
                     <text class="name">{{ item1.name }}</text>
                  </van-grid-item>
               </van-grid>
              </view>   
         </view>
         <!-- <view class="grid_box grid_box1">
              <view  class="title">考核管理</view>
              <view style="margin-top: 30rpx;">
               <van-grid column-num="4" :border="false">
                  <van-grid-item icon="photo-o" use-slot :text="item.name" v-for="(item,index) in tabList1" :key="index"  @click="routeTo(item.url)">
                     <image
                           style="width:96rpx; height: 96rpx;"
                           :src="`../../static/images/index/icon1_${index+1}.png`"
                        />
                     <text class="name">{{ item.name }}</text>
                  </van-grid-item>
               </van-grid>
              </view>   
         </view> -->
      </view>
      <view style="height: 200rpx;"></view>
      
   </view>
</template>
<script setup>  
  import {menuTreeSelectorApi,getLoginUserApi} from '@/api'
  import { onLoad } from '@dcloudio/uni-app';
  const tabList=ref([ 
  ])
  const tabList1=ref([
   {name:'考核记录',icon:'',url:''},
   {name:'月度考核',icon:'',url:''},
   {name:'季度考核',icon:'',url:''},
   {name:'年度考核',icon:'',url:''}, 
  ])
  const userInfo=ref({})
  
  const routeTo=async (item)=>{ 
   uni.navigateTo({
      url:item.path,
   })
   if(item.children){ 
	   let res = await fnfn(item.children)
	   uni.setStorage({
	   	  key:'mensu',
		  data:JSON.stringify(res)
	   })
   }
  }
  
  function fnfn(list) {  // 声明一个处理函数
	  let obj = {};  // 声明一个对象，这一步是利用对象属性值是否存在的功能来判断是否已存在相同的属性
	  const newList = [] // 用来存储拿到的对象
	  list.map(item => { 
		  const type = JSON.parse(item.extJson).of
		  if (!obj[type]) {  // 判断该属性是否已存在
			  obj[type] = {  // 如果不存在，就进行赋值，赋值的解构可以写成你想要的形式
				  type,
				  list: []
			  }
		  }
		  obj[type].list.push(item); // 赋值完成后将该项加入到对应的数组中，直至循环完成
	  })
	  newList.push(...Object.values(obj)) // 利用object.values的方法将对象的可迭代属性的值加入到数组中,使用解构语法，不熟悉这个方法的话可以mdn查询
	  return newList
} 
  onLoad(async()=>{ 
   const res = await getLoginUserApi();
   userInfo.value =res.data
   console.log(userInfo.value,121212)
   getMenu()
  })
  const getMenu=()=>{
   menuTreeSelectorApi().then(res=>{
      tabList.value=res.data
	   
   })
  }
</script>
<style >
.grid_box /deep/ .van-grid-item__content{
   background: transparent;
}
</style>
<style lang="scss" scoped>
.index_head{
   padding: 20rpx 30rpx;
   display: flex;
   background: #fff;
   align-items: center;
   .placeName{
      font-size: 36rpx;
      font-weight: 700;
      color: #333;
      display: flex;
      align-items: center;
      text{
         padding-right: 10rpx;
      }
   }
   .welcome{
      font-size: 24rpx; 
      color: #333;
      padding-top: 10rpx;
      text{
         color: #333;
         padding: 0 10rpx; 
         font-weight: 700;
      }
   }
   .nickname{
      padding-left: 30rpx;
      font-size: 32rpx;
      color: #333;
      flex: 1;
   }

}
.swiperBox{
   padding: 30rpx;
   box-sizing: border-box;
   .swiper{
      width:100%;
      height: 350rpx;
      border-radius: 20rpx;
      image{
         width: 100%;
         height: 100%;
         display: block;
         border-radius: 20rpx;
      }
   }
}
.grid_box{
   // width: 100%; 
   border-radius: 12rpx 12rpx 12rpx 12rpx;
   opacity: 1;
   margin-top: 30rpx;
   padding: 30rpx 15rpx;
   padding-top:40rpx ;
   box-sizing: border-box;
  
   .title{
      font-size: 32rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 700;
      color: #3D3D3D; 
      position: relative;
      padding-left: 30rpx;
      &::after{
         content: "";
         position: absolute;
         left: 0;
         top: 0;
         bottom: 0;
         margin: auto;
         width: 12rpx;
         height: 28rpx;
         background: #1158BF;
         border-radius: 2rpx 2rpx 2rpx 2rpx;
         opacity: 1;
      }
   }
   &:nth-child(2n){ 
      background: linear-gradient(180deg, rgba(17,88,191,0.16) 0%, rgba(255,255,255,0) 13%, #FFFFFF 97%);
      
      .title{ 
         &::after{ 
            background: #1158BF; 
         }
      }
   }
   &:nth-child(2n+1){ 
      background: linear-gradient(180deg, rgba(255,160,0,0.16) 0%, rgba(255,255,255,0) 29%, #FFFFFF 97%);
      .title{ 
         &::after{ 
            background: #FFA000; 
         } 
      }
   }
   .name{
      font-size: 28rpx;
      margin-top: 20rpx;
   }
} 
</style> 